<!--<template>-->
<!--  <div>-->
<!--    &lt;!&ndash; banner &ndash;&gt;-->
<!--    <div class="home-banner">-->
<!--      <div class="banner-container">-->
<!--        &lt;!&ndash; 联系方式 &ndash;&gt;-->
<!--        <h1 class="blog-title animated zoomIn">-->
<!--          和其光，同其尘-->
<!--        </h1>-->
<!--        <div class="blog-intro2" v-show="obj.output">-->
<!--          {{ obj.output }} <span class="typed-cursor">|</span>-->
<!--        </div>-->

<!--        &lt;!&ndash; 联系方式 &ndash;&gt;    &lt;!&ndash;这里的联系方式用于移动端，浏览器端看不到  annotation by chen&ndash;&gt;-->
<!--        <div class="blog-contact">-->
<!--          <a-->
<!--            class="iconfont iconqq"-->
<!--            target="_blank"-->
<!--            href="http://wpa.qq.com/msgrd?v=3&uin=2776895893&site=qq&menu=yes"-->
<!--          />-->
<!--          <a-->
<!--            target="_blank"-->
<!--            href="https://github.com/chenchao1024"-->
<!--            class="ml-5 mr-5 iconfont icongithub"-->
<!--          />-->
<!--          <a-->
<!--            target="_blank"-->
<!--            href="https://gitee.com/chen-1024"-->
<!--            class="iconfont icongitee-fill-round"-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash; 向下滚动 &ndash;&gt;-->
<!--      <div class="scroll-down" @click="scrollDown">-->
<!--        <v-icon color="#fff" class="scroll-down-effects">-->
<!--          mdi-chevron-down-->
<!--        </v-icon>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 主页文章 &ndash;&gt;-->
<!--    <v-row class="home-container"  >-->

<!--      &lt;!&ndash;主页的文章以及图片  annotation by chen&ndash;&gt;-->
<!--      <v-col md="9" cols="12" >-->

<!--        <v-card-->
<!--          v-for="(item, index) of articleList"-->

<!--          :key="item.id"-->
<!--          class="animated zoomIn article-card"-->
<!--          style="border-radius: 12px 8px 8px 12px"-->

<!--        >-->
<!--          &lt;!&ndash; 文章封面图 &ndash;&gt;-->
<!--          <div :class="isRight(index)">-->
<!--            <a @click="detail(item)">-->
<!--              <v-img-->
<!--                class="on-hover"-->
<!--                width="100%"-->
<!--                height="100%"-->
<!--                :src="item.img"-->
<!--              />-->
<!--            </a>-->
<!--          </div>-->
<!--          &lt;!&ndash; 文章信息 &ndash;&gt;-->
<!--          <div class="article-wrapper">-->
<!--            <div style="line-height:1.4">-->
<!--              <a @click="detail(item)">-->
<!--                {{ item.title }}-->
<!--              </a>-->
<!--            </div>-->
<!--            <div class="article-info">-->
<!--              &lt;!&ndash; 是否置顶 &ndash;&gt;-->
<!--              <span v-if="item.isTop == 1">-->
<!--                <span style="color:#ff7242">-->
<!--                  <i class="iconfont iconzhiding"/> 置顶-->
<!--                </span>-->
<!--                <span class="separator">|</span>-->
<!--              </span>-->
<!--              <v-avatar size="30" style="margin-bottom:0.5rem">-->
<!--                <img :src="item.avatar"/>-->
<!--              </v-avatar>-->
<!--              {{ item.nick }}-->
<!--              &lt;!&ndash; 发表时间 &ndash;&gt;-->
<!--              <v-icon size="14">mdi-calendar-month-outline</v-icon>-->
<!--              {{ item.time | date }}-->
<!--              <span class="separator">|</span>-->
<!--              &lt;!&ndash; 文章分类 &ndash;&gt;-->
<!--              <router-link :to="'/categories/' + item.categoryId">-->
<!--                <v-icon size="14">mdi-inbox-full</v-icon>-->
<!--                {{ item.category }}-->
<!--              </router-link>-->
<!--              <span class="separator">|</span>-->
<!--              <v-icon size="14">mdi-tag-multiple</v-icon>-->
<!--              {{ item.tag }}-->
<!--              &lt;!&ndash; 文章标签 &ndash;&gt;-->
<!--              <router-link-->
<!--                style="display:inline-block"-->
<!--                :to="'/tags/' + tag.id"-->
<!--                class="mr-1"-->
<!--                v-for="tag of item.tagDTOList"-->
<!--                :key="tag.id"-->
<!--              >-->

<!--              </router-link>-->
<!--            </div>-->
<!--            &lt;!&ndash; 文章内容 &ndash;&gt;-->
<!--            <div class="article-content">-->
<!--              <span v-html="item.content"></span>-->
<!--              &lt;!&ndash;{{ item.content }}&ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
<!--        </v-card>-->

<!--        &lt;!&ndash; 无限加载 &ndash;&gt;-->
<!--        &lt;!&ndash;<infinite-loading @infinite="infiniteHandler">&ndash;&gt;-->
<!--        &lt;!&ndash;<div slot="no-more" />&ndash;&gt;-->
<!--        &lt;!&ndash;</infinite-loading>&ndash;&gt;-->


<!--      </v-col>-->

<!--      &lt;!&ndash; 博主信息 &ndash;&gt;-->
<!--      <v-col md="3" cols="12" class="d-md-block d-none">-->
<!--        <div class="blog-wrapper">-->
<!--          &lt;!&ndash;博主信息（头像，博客数量统计，联系方式等） annotation by chen&ndash;&gt;-->
<!--          <v-card class="animated zoomIn blog-card mt-5">-->
<!--            &lt;!&ndash;博主信息 annotation by chen&ndash;&gt;-->
<!--            <div class="author-wrapper">-->
<!--              &lt;!&ndash; 博主头像 annotation by chen&ndash;&gt;-->
<!--              <v-avatar size="110" style="margin-bottom:0.5rem">-->
<!--                <img class="author-avatar" :src="form.avatar"/>-->
<!--              </v-avatar>-->
<!--              &lt;!&ndash;博主名字&ndash;&gt;-->
<!--              <div style="font-size: 1.375rem">{{ form.nick }}</div>-->
<!--              &lt;!&ndash;博主签名&ndash;&gt;-->
<!--              <div style="font-size: 0.875rem;">{{ form.introduce }}</div>-->
<!--            </div>-->
<!--            &lt;!&ndash; 博客信息 &ndash;&gt;-->
<!--            <div class="blog-info-wrapper">-->
<!--              <div class="blog-info-data">-->
<!--                <router-link to="/archives">-->
<!--                  <div style="font-size: 0.875rem">文章</div>-->
<!--                  <div style="font-size: 1.25rem">-->
<!--                    {{ form.articleCount }}-->
<!--                  </div>-->
<!--                </router-link>-->
<!--              </div>-->
<!--              <div class="blog-info-data">-->
<!--                <router-link to="/categories">-->
<!--                  <div style="font-size: 0.875rem">分类</div>-->
<!--                  <div style="font-size: 1.25rem">-->
<!--                    {{ articleCount }}-->
<!--                  </div>-->
<!--                </router-link>-->
<!--              </div>-->
<!--              &lt;!&ndash;不要标签 changed by chen&ndash;&gt;-->
<!--              <div class="blog-info-data">-->
<!--                <router-link to="/tags">-->
<!--                  <div style="font-size: 0.875rem">标签</div>-->
<!--                  <div style="font-size: 1.25rem">{{ tarCount }}</div>-->
<!--                </router-link>-->
<!--              </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; 收藏按钮 &ndash;&gt;-->
<!--            <a class="collection-btn" @click="tip = true">-->
<!--              &lt;!&ndash;书签图案 annotation by chen&ndash;&gt;-->
<!--              <v-icon color="#fff" size="18" class="mr-1">mdi-bookmark</v-icon>-->
<!--              加入书签-->
<!--            </a>-->
<!--            <div class="card-info-social">-->
<!--              <a-->
<!--                class="iconfont iconqq"-->
<!--                target="_blank"-->
<!--                href="http://wpa.qq.com/msgrd?v=3&uin=2776895893&site=qq&menu=yes"-->
<!--              />-->
<!--              <a-->
<!--                target="_blank"-->
<!--                href="https://github.com/chenchao1024"-->
<!--                class="ml-5 mr-5 iconfont icongithub"-->
<!--              />-->
<!--              <a-->
<!--                target="_blank"-->
<!--                href="https://gitee.com/chen-1024"-->
<!--                class="iconfont icongitee-fill-round"-->
<!--              />-->
<!--            </div>-->
<!--          </v-card>-->
<!--          &lt;!&ndash; 网站信息 &ndash;&gt;   &lt;!&ndash;公告 annotation by chen&ndash;&gt;-->
<!--          <v-card class="blog-card animated zoomIn mt-5 big">-->
<!--            <div class="web-info-title">-->
<!--              <v-icon size="18">mdi-bell</v-icon>-->
<!--              公告-->
<!--              &lt;!&ndash;: {{form.introduce}}https://www.lvjguo.top/img/bar2.90c9d9b3.gif&ndash;&gt;-->
<!--              <v-img src="../../assets/png/juansi.png" alt="hello" width="100%" height="100%"/>-->
<!--            </div>-->
<!--            <div style="font-size:0.875rem">-->
<!--              {{ blogInfo.notice }}-->
<!--            </div>-->
<!--          </v-card>-->

<!--          &lt;!&ndash;天气&ndash;&gt;-->
<!--          <br/>-->
<!--          <div>-->
<!--            <div id="he-plugin-standard"></div>-->
<!--          </div>-->

<!--          &lt;!&ndash; 网站信息 &ndash;&gt;   &lt;!&ndash;网站资询 annotation by chen&ndash;&gt;-->
<!--          <v-card class="blog-card animated zoomIn mt-5">-->
<!--            <div class="web-info-title">-->
<!--              <v-icon size="18">mdi-chart-line</v-icon>-->
<!--              网站资讯-->
<!--            </div>-->
<!--            <div class="web-info">-->
<!--              <div style="padding:4px 0 0">-->
<!--                运行时间:<span class="float-right">{{ time }}</span>-->
<!--              </div>-->
<!--              <div style="padding:4px 0 0">-->
<!--                总访问量:<span class="float-right">{{ seeCount }}</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </v-card>-->
<!--        </div>-->
<!--      </v-col>-->
<!--    </v-row>-->
<!--    &lt;!&ndash; 提示消息 &ndash;&gt;-->
<!--    <v-snackbar v-model="tip" top color="#49b1f5" :timeout="2000">-->
<!--      按CTRL+D 键将本页加入书签-->
<!--    </v-snackbar>-->
<!--  </div>-->
<!--</template>-->


<!--<script>-->
<!--import EasyTyper from "easy-typer-js";-->
<!--import request from '../../utils/request'-->

<!--let str = ''-->
<!--export default {-->
<!--  mounted() {-->

<!--    str = sessionStorage.getItem("user")-->
<!--    this.form = JSON.parse(str)-->
<!--    request.get("/article/list/" + this.form.username).then(res => {-->
<!--      this.form.articleCount = res.data.length-->
<!--    })-->
<!--    //文章分类-->
<!--    request.get('/article/categoryList/'+this.form.username).then(res=>{-->
<!--      this.articleCount=res.data.length-->

<!--    })-->

<!--    //    标签-->
<!--    request.get('/article/list/'+this.form.username).then(res=>{-->

<!--      this.tarCount = res.data.length;-->

<!--    });-->
<!--  },-->

<!--  created() {-->

<!--    request.get('article/seeCount').then(res=>{-->

<!--      this.seeCount=res.data-->
<!--    })-->

<!--    window.WIDGET = {-->
<!--      "CONFIG": {-->
<!--        "layout": "2",-->
<!--        "width": 280,-->
<!--        "height": 360,-->
<!--        "background": "1",-->
<!--        "dataColor": "FFFFFF",-->
<!--        "borderRadius": "10",-->
<!--        "key": "80d1312c7af044b09e79b4a54092fbdb" //这里换成自己的key！-->
<!--      }-->
<!--    }-->
<!--    var script = document.createElement('script');-->
<!--    script.type = 'text/javascript';-->
<!--    script.src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";-->
<!--    document.getElementsByTagName('head')[0].appendChild(script);-->

<!--    this.init();-->

<!--    this.timer = setInterval(this.runTime, 1000);-->


<!--    if (this.$store.state.username === null) {-->
<!--      this.$toast({type: "warnning", message: '亲，请先登录！'})-->
<!--    }-->

<!--    if (this.form.avatar === '') {-->
<!--      this.form.avatar = 'https://img1.baidu.com/it/u=4169370716,188510386&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=223'-->
<!--    }-->

<!--    if (this.form.introduce === '') {-->
<!--      this.form.introduce = '路漫漫其修远兮，吾将上下而求索'-->
<!--    }-->

<!--    if (this.form.nick === '') {-->
<!--      this.form.nick = 'Max-u-19 '-->
<!--    }-->
<!--    request.get("/article/selectArticleByFlag").then(res => {-->


<!--      this.articleList = res.data.reverse()-->
<!--    })-->


<!--  },-->

<!--  data: function () {-->
<!--    return {-->
<!--      seeCount: 0,-->
<!--      tip: false,-->
<!--      time: "",-->
<!--      obj: {-->
<!--        output: "",-->
<!--        isEnd: false,-->
<!--        speed: 300,-->
<!--        singleBack: false,-->
<!--        sleep: 0,-->
<!--        type: "rollback",-->
<!--        backSpeed: 40,-->
<!--        sentencePause: true-->
<!--      },-->
<!--      articleCount:0,-->
<!--      tarCount:0,-->
<!--      articleList: [],-->
<!--      blogInfo: {},-->
<!--      current: 1,-->
<!--      form: {-->
<!--        introduce: '',-->
<!--        avatar: '',-->
<!--        nick: '',-->
<!--        articleCount: '',-->
<!--        categoryCount:0-->
<!--      },-->

<!--    };-->
<!--  },-->

<!--  methods: {-->

<!--    detail(ids) {-->

<!--      if(ids.isEnable===false){-->
<!--        this.$toast({-->
<!--          type:'warnning',-->
<!--          message:'该文章已被封禁,请联系管理员'-->
<!--        })-->
<!--        return-->
<!--      }-->
<!--      let id = ids.id-->
<!--      this.$router.push({-->
<!--        path: '/articles/',-->
<!--        query: {id: id}-->
<!--      })-->
<!--    },-->
<!--    // 初始化-->
<!--    init() {-->
<!--      document.title = this.$route.meta.title;-->
<!--      // 一言Api进行打字机循环输出效果-->
<!--      fetch("https://v1.hitokoto.cn?c=i")-->
<!--        .then(res => {-->
<!--          return res.json();-->
<!--        })-->
<!--        .then(({hitokoto}) => {-->
<!--          this.initTyped(hitokoto);-->
<!--        });-->
<!--    },-->
<!--    initTyped(input, fn, hooks) {-->
<!--      const obj = this.obj;-->
<!--      // eslint-disable-next-line no-unused-vars-->
<!--      const typed = new EasyTyper(obj, input, fn, hooks);-->
<!--      console.log(typed);-->
<!--    },-->
<!--    scrollDown() {-->
<!--      window.scrollTo({-->
<!--        behavior: "smooth",-->
<!--        top: document.documentElement.clientHeight-->
<!--      });-->
<!--    },-->
<!--    runTime() {-->
<!--      var timeold =-->
<!--        new Date().getTime() - new Date("January 1,2022").getTime();-->
<!--      var msPerDay = 24 * 60 * 60 * 1000;-->
<!--      var daysold = Math.floor(timeold / msPerDay);-->
<!--      var str = "";-->
<!--      var day = new Date();-->
<!--      str += daysold + "天";-->
<!--      str += day.getHours() + "时";-->
<!--      str += day.getMinutes() + "分";-->
<!--      str += day.getSeconds() + "秒";-->
<!--      this.time = str;-->
<!--    },-->

<!--    infiniteHandler($state) {-->
<!--      let md = require("markdown-it")();-->
<!--      this.axios-->
<!--        .get("/api/articles", {-->
<!--          params: {-->
<!--            current: this.current-->
<!--          }-->
<!--        })-->
<!--        .then(({data}) => {-->
<!--          console.log(data);-->
<!--          if (data.data.length) {-->
<!--            // 去除markdown标签-->
<!--            data.data.forEach(item => {-->
<!--              item.articleContent = md-->
<!--                .render(item.articleContent)-->
<!--                .replace(/<\/?[^>]*>/g, "")-->
<!--                .replace(/[|]*\n/, "")-->
<!--                .replace(/&npsp;/gi, "");-->
<!--            });-->
<!--            console.log(data);-->
<!--            this.articleList.push(...data.data);-->
<!--            this.current++;-->
<!--            $state.loaded();-->
<!--          } else {-->
<!--            $state.complete();-->
<!--          }-->
<!--        });-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    isRight() {-->
<!--      return function (index) {-->
<!--        if (index % 2 == 0) {-->
<!--          return "article-cover left-radius";-->
<!--        }-->
<!--        return "article-cover right-radius";-->
<!--      };-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style lang="stylus">-->

<!--.typed-cursor-->
<!--  opacity: 1-->
<!--  animation: blink 0.7s infinite-->

<!--@keyframes blink-->
<!--  0%-->
<!--    opacity: 1-->
<!--  50%-->
<!--    opacity: 0-->
<!--  100%-->
<!--    opacity: 1-->
<!--</style>-->

<!--<style scoped>-->
<!--.user-avatar {-->
<!--  cursor: pointer;-->
<!--  border-radius: 50%;-->
<!--}-->

<!--.home-banner {-->
<!--  position: absolute;-->
<!--  top: -60px;-->
<!--  left: 0;-->
<!--  right: 0;-->
<!--  height: 100vh;-->
<!--  background: url(../../assets/img/bg2.jpg) center center / cover no-repeat;-->
<!--  background-color: #49b1f5;-->
<!--  /*background-attachment: fixed;*/-->
<!--  text-align: center;-->
<!--  color: #fff !important;-->
<!--  animation: header-effect 1s;-->
<!--}-->

<!--.banner-container {-->
<!--  margin-top: 43vh;-->
<!--  line-height: 1.5;-->
<!--  color: #eee;-->
<!--}-->

<!--.blog-contact a {-->
<!--  color: #fff !important;-->
<!--}-->

<!--.card-info-social {-->
<!--  line-height: 40px;-->
<!--  text-align: center;-->
<!--  font-size: 1.5rem;-->
<!--  margin: 6px 0 -6px;-->
<!--}-->

<!--.left-radius {-->
<!--  border-radius: 8px 0 0 8px !important;-->
<!--  order: 0;-->
<!--}-->

<!--.right-radius {-->
<!--  border-radius: 0 8px 8px 0 !important;-->
<!--  order: 1;-->
<!--}-->

<!--.article-wrapper {-->
<!--  font-size: 14px;-->
<!--}-->

<!--@media (min-width: 760px) {-->
<!--  .blog-title {-->
<!--    font-size: 2.5rem;-->
<!--  }-->

<!--  .blog-intro2 {-->
<!--    font-size: 1.5rem;-->
<!--  }-->

<!--  .blog-contact {-->
<!--    display: none;-->
<!--  }-->

<!--  .home-container {-->
<!--    max-width: 1200px;-->
<!--    margin: calc(100vh - 48px) auto 28px auto;-->
<!--    padding: 0 5px;-->
<!--  }-->

<!--  .article-card {-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    height: 280px;-->
<!--    width: 100%;-->
<!--    margin-top: 20px;-->
<!--  }-->

<!--  .article-cover {-->
<!--    overflow: hidden;-->
<!--    height: 100%;-->
<!--    width: 45%;-->
<!--  }-->

<!--  .on-hover {-->
<!--    transition: all 0.6s;-->
<!--  }-->

<!--  .article-card:hover .on-hover {-->
<!--    transform: scale(1.1);-->
<!--  }-->

<!--  .article-wrapper {-->
<!--    padding: 0 2.5rem;-->
<!--    width: 55%;-->
<!--  }-->

<!--  .article-wrapper a {-->
<!--    font-size: 1.5rem;-->
<!--    transition: all 0.3s;-->
<!--  }-->
<!--}-->

<!--@media (max-width: 759px) {-->
<!--  .blog-title {-->
<!--    font-size: 26px;-->
<!--  }-->

<!--  .blog-contact {-->
<!--    font-size: 1.25rem;-->
<!--    line-height: 2;-->
<!--  }-->

<!--  .home-container {-->
<!--    width: 100%;-->
<!--    margin: calc(100vh - 66px) auto 0 auto;-->
<!--  }-->

<!--  .article-card {-->
<!--    margin-top: 1rem;-->
<!--  }-->

<!--  .article-cover {-->
<!--    border-radius: 8px 8px 0 0 !important;-->
<!--    height: 230px !important;-->
<!--    width: 100%;-->
<!--  }-->

<!--  .article-cover div {-->
<!--    border-radius: 8px 8px 0 0 !important;-->
<!--  }-->

<!--  .article-wrapper {-->
<!--    padding: 1.25rem 1.25rem 1.875rem;-->
<!--  }-->

<!--  .article-wrapper a {-->
<!--    font-size: 1.25rem;-->
<!--    transition: all 0.3s;-->
<!--  }-->
<!--}-->

<!--.scroll-down {-->
<!--  cursor: pointer;-->
<!--  position: absolute;-->
<!--  bottom: 0;-->
<!--  width: 100%;-->
<!--}-->

<!--.scroll-down i {-->
<!--  font-size: 2rem;-->
<!--}-->

<!--.article-wrapper a:hover {-->
<!--  color: #8e8cd8;-->
<!--}-->

<!--.article-info {-->
<!--  font-size: 95%;-->
<!--  color: #858585;-->
<!--  line-height: 2;-->
<!--  margin: 0.375rem 0;-->
<!--}-->

<!--.article-info a {-->
<!--  font-size: 95%;-->
<!--  color: #858585 !important;-->
<!--}-->

<!--.article-content {-->
<!--  line-height: 2;-->
<!--  overflow: hidden;-->
<!--  text-overflow: ellipsis;-->
<!--  display: -webkit-box;-->
<!--  -webkit-line-clamp: 3;-->
<!--  -webkit-box-orient: vertical;-->
<!--}-->

<!--.blog-wrapper {-->
<!--  position: sticky;-->
<!--  top: 10px;-->
<!--}-->

<!--.blog-card {-->
<!--  line-height: 2;-->
<!--  padding: 1.25rem 1.5rem;-->
<!--}-->

<!--.author-wrapper {-->
<!--  text-align: center;-->
<!--}-->

<!--.blog-info-wrapper {-->
<!--  display: flex;-->
<!--  justify-self: center;-->
<!--  padding: 0.875rem 0;-->
<!--}-->

<!--.blog-info-data {-->
<!--  flex: 1;-->
<!--  text-align: center;-->
<!--}-->

<!--.blog-info-data a {-->
<!--  text-decoration: none;-->
<!--}-->

<!--.collection-btn {-->
<!--  text-align: center;-->
<!--  z-index: 1;-->
<!--  font-size: 14px;-->
<!--  position: relative;-->
<!--  display: block;-->
<!--  background-color: #49b1f5;-->
<!--  color: #fff !important;-->
<!--  height: 32px;-->
<!--  line-height: 32px;-->
<!--  transition-duration: 1s;-->
<!--  transition-property: color;-->
<!--}-->

<!--.collection-btn:before {-->
<!--  position: absolute;-->
<!--  top: 0;-->
<!--  right: 0;-->
<!--  bottom: 0;-->
<!--  left: 0;-->
<!--  z-index: -1;-->
<!--  background: #ff7242;-->
<!--  content: "";-->
<!--  transition-timing-function: ease-out;-->
<!--  transition-duration: 0.5s;-->
<!--  transition-property: transform;-->
<!--  transform: scaleX(0);-->
<!--  transform-origin: 0 50%;-->
<!--}-->

<!--.collection-btn:hover:before {-->
<!--  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);-->
<!--  transform: scaleX(1);-->
<!--}-->

<!--.author-avatar {-->
<!--  transition: all 0.5s;-->
<!--}-->

<!--.author-avatar:hover {-->
<!--  transform: rotate(360deg);-->
<!--}-->

<!--.web-info {-->
<!--  padding: 0.25rem;-->
<!--  font-size: 0.875rem;-->
<!--}-->

<!--.scroll-down-effects {-->
<!--  color: #eee !important;-->
<!--  text-align: center;-->
<!--  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15);-->
<!--  line-height: 1.5;-->
<!--  display: inline-block;-->
<!--  text-rendering: auto;-->
<!--  -webkit-font-smoothing: antialiased;-->
<!--  animation: scroll-down-effect 1.5s infinite;-->
<!--}-->

<!--@keyframes scroll-down-effect {-->
<!--  0% {-->
<!--    top: 0;-->
<!--    opacity: 0.4;-->
<!--    filter: alpha(opacity=40);-->
<!--  }-->
<!--  50% {-->
<!--    top: -16px;-->
<!--    opacity: 1;-->
<!--    filter: none;-->
<!--  }-->
<!--  100% {-->
<!--    top: 0;-->
<!--    opacity: 0.4;-->
<!--    filter: alpha(opacity=40);-->
<!--  }-->
<!--}-->

<!--.big i {-->
<!--  color: #f00;-->
<!--  animation: big 0.8s linear infinite;-->
<!--}-->

<!--@keyframes big {-->
<!--  0%,-->
<!--  100% {-->
<!--    transform: scale(1);-->
<!--  }-->
<!--  50% {-->
<!--    transform: scale(1.2);-->
<!--  }-->
<!--}-->
<!--</style>-->
